<template>
  <div id="content">
    
    <h4>我要登录</h4>
   
    <div>
      <div>
        <label for="username">用户名</label>
        <input
          type="text"
          name="username"
          v-model="username"
          placeholder="请输入用户名"
        />
      </div>
      <div>
        <label for="password">密码</label>
        <input
          type="password"
          name="password"
          v-model="password"
          placeholder="请输入密码"
        />
      </div>
      <button class="button1" @click="login">登录</button>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { loginApi } from "../api";

import { Toast } from "vant";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    login() {
      loginApi({
        username: this.username,
        password: this.password,
      })

      //修改
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            Toast.success("登录成功");``
            localStorage.setItem('username',this.username)
            this.$router.push("/");
          }
        })
        .catch((err) => {
          console.log(err);
          Toast.success(err.message);
        });
        //登录拦截

        axios
          .post("/api/login.php", {
            username: this.username,
            password: this.password,
          })
      //     .then((response) => {
      //   this.$store.commit("updataLogin", true);
      //   this.$router.push("/");
      // });
    },
  },
};
</script>
<style scoped>

body {
  margin: 0;
}
.button1{
position: absolute;
left: 50%;
}
header {
  height: 40px;
  background: #0099ff;
  color: white;
}
header h1 {
  margin-top: 0;
  text-align: center;
  font-size: 20px;
}
#content {
  padding: 10px;
}
#content input {
  width: 100%;
  padding: 10px;
  background: #f3f3f3;
  border-radius: 5px;
  box-sizing: border-box;
}
#content input[type="button"],
#content input[name="submit"] {
  margin-top: 10px;
  background: #0099ff;
  color: white;
}
.hint {
  color: hsla(0, 10%, 50%, 1);
  /*color: rgba(255, 0, 255, 1);*/
  font-size: 14px;
}
</style>